<!-- 
    Copyright 2014 Huawei Technologies Co., Ltd. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
        http://www.apache.org/licenses/LICENSE-2.0
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License. 
-->
<div class="row content" ng-if="dataReady && nodata" style="margin-top:100px">
    <div class="row col-md-12" style="font-size:20px">
        <div class="col-md-3"></div>
        <div class="col-md-6" style="text-align:center">
            <div>
            You have no component, please click button below to create your first one.
            </div>
            <br/>
            <button type="button" class="btn btn-success newcomponent" style="padding:20px 40px; font-size:26px" ng-click="showNewComponent()">
                <i class="glyphicon glyphicon-plus"></i>
                <span style="margin-left:5px">Create Component</span>
            </button>
        </div>
        <div class="col-md-3"></div>
    </div>
</div>
<div class="row" ng-if="dataReady && !nodata">
    <div class="col-lg-12">
        <legend style="border-bottom:none">
            <strong>Component</strong> List
            <button type="button" class="btn btn-success newcomponent" style="float:right" ng-click="showNewComponent()">
                <i class="glyphicon glyphicon-plus" style="font-size:16px"></i>
                <span style="margin-left:5px">Create</span>
            </button>
        </legend>
        <section class="widget">
            <div class="widget-body">
                <div class="search-area">
                    <div class="input-group" style="float:right;width:480px">
                    <input ng-model="filter.name" placeholder="component name" class="filter-input">
                    <input ng-model="filter.version" placeholder="component version" class="filter-input">
                    <span class="input-group-addon" style="cursor:pointer;border:none" ng-click="getComponents()">
                        <i class="fa fa-search"></i>
                    </span>
                    </div>
                </div>
                <div class="list-content">
                    <div class="col-md-12">
                        <div class="row list-header">
                            <div class="col-md-4">Name</div>
                            <div class="col-md-4">Version</div>
                            <div class="col-md-4">Operation</div>
                        </div>
                        <div class="row list-body">
                            <div class="row" ng-repeat="component in components">
                                <div class="list-row">
                                    <div class="col-md-4">
                                        <span>{{component.name}}</span>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="row sublist-row" ng-repeat="version in component.versions track by version.id">
                                            <div class="col-md-6">
                                                <span>{{version.version}}</span>
                                            </div>
                                            <div class="col-md-6">
                                                <button type="button" class="btn btn-primary td-btn" ng-click="showComponentDetail(version.id)" style="padding:3px 5px">
                                                    <i class="btn-primary fa fa-edit" style="font-size:16px"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="list-row-more">
                                    <button type="button" class="btn btn-success td-btn view-btn" ng-click="showMoreVersion(component.name)" style="float:right;">
                                        <i class="fa fa-refresh" style="font-size:16px"></i>
                                        <span style="margin-left:5px">show more</span>
                                    </button>
                                </div>
                            </div>
                            <div class="list-row" ng-show="components.length == 0">
                                <div class="col-md-12" style="text-align:center;padding-top:10px">
                                    <span>No Data Found.</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>